<template>
  <div class="center">
    <!-- 头部 -->
    <div class="table_header flex flex_bet flex-wrap">
      <div class="table_button flex felx_align">
        <el-button type="primary" icon="el-icon-refresh" size="mini" @click="Refresh"></el-button>
        <div class="txt">公共应用不支持应用管理功能</div>
      </div>
      <div class="table_searchs flex felx_align">
        <div class="table_search flex">
          <el-input placeholder="搜索" v-model="searchTable" class="input-with-select" size="small">
            <el-select v-model="select" slot="prepend" placeholder="请选择" class="table_select" style="width:105px">
              <el-option label="应用名称" value="1"></el-option>
              <el-option label="应用包名" value="2"></el-option>
              <el-option label="批次" value="3"></el-option>
              <el-option label="归属" value="4"></el-option>
            </el-select>
            <el-button slot="append" icon="el-icon-search" @click="idnameSearch"></el-button>
          </el-input>
        </div>
        <dynamicTable :checkboxVal="checkboxVal" @alter="alterCheckbok" />
      </div>
    </div>
    <el-table stripe style="width: 100%" :data="labelTable" :key="key" border fit highlight-current-row ref="tableDataRef" max-height="555">
      <el-table-column v-if="colData[0].istrue" min-width="80" align="center" prop="username" label="归属"></el-table-column>
      <el-table-column v-if="colData[1].istrue" min-width="80" align="center" prop="app_batch" label="批次">
        <template slot-scope="scope">{{scope.row.app_batch == 0 ? '公共应用' : scope.row.app_batch}}</template>
      </el-table-column>
      <el-table-column v-if="colData[2].istrue" min-width="100" align="center" prop="app_name" label="应用名称"></el-table-column>
      <el-table-column v-if="colData[3].istrue" min-width="120" align="center" prop="app_package" label="应用包名"></el-table-column>
      <el-table-column v-if="colData[4].istrue" min-width="80" align="center" prop="id" label="应用图标">
        <template slot-scope="scope">
          <div class="icon_img flex flex_cen">
            <img :src="scope.row.app_img" alt />
          </div>
        </template>
      </el-table-column>
      <el-table-column v-if="colData[5].istrue" min-width="100" align="center" prop="id" label="是否允许滑动">
        <template slot-scope="scope">
          <el-switch v-model.number="scope.row.is_slide" :disabled="scope.row.app_batch == 0" active-color="#409EFF" inactive-color="#dcdcdc" :active-value="1" :inactive-value="0" @change="isSilde(scope.row.app_id,scope.row.batch_id,scope.row.is_slide)"></el-switch>
        </template>
      </el-table-column>
      <el-table-column v-if="colData[6].istrue" min-width="100" align="center" prop="id" label="是否允许升级">
        <template slot-scope="scope">
          <el-switch v-model.number="scope.row.is_upgrade" :disabled="scope.row.app_batch == 0" active-color="#409EFF" inactive-color="#dcdcdc" :active-value="1" :inactive-value="0" @change="isUpguade(scope.row.app_id,scope.row.batch_id,scope.row.is_upgrade)"></el-switch>
        </template>
      </el-table-column>
      <el-table-column v-if="colData[7].istrue" min-width="100" align="center" prop="id" label="是否允许联网">
        <template slot-scope="scope">
          <el-switch v-model.number="scope.row.is_network" :disabled="scope.row.app_batch == 0" active-color="#409EFF" inactive-color="#dcdcdc" :active-value="1" :inactive-value="0" @change="isNetwork(scope.row.app_id,scope.row.batch_id,scope.row.is_network)"></el-switch>
        </template>
      </el-table-column>
      <el-table-column v-if="colData[8].istrue" min-width="80" align="center" prop="id" label="开机自启">
        <template slot-scope="scope">
          <el-switch v-model.number="scope.row.is_auto" :disabled="scope.row.app_batch == 0" active-color="#409EFF" inactive-color="#dcdcdc" :active-value="1" :inactive-value="0" @change="isAuto(scope.row.app_id,scope.row.batch_id,scope.row.is_auto)"></el-switch>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="paging">
      <el-pagination :current-page.sync="listQuery.startSize" background @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 50, 100, 200]" layout="total, sizes, prev, pager, next, jumper" :total="total" :page-size="listQuery.pageSize"></el-pagination>
    </div>
  </div>
</template>

<script>
import dynamicTable from "@/components/DynamicTable";
import objectable from "@/utils/objectable.js";
import { queryAppControl, editAppControl } from "@/api/deployment.js";
import { getBatchTwo } from "@/api/equipment.js";
export default {
  components: { dynamicTable },
  data() {
    return {
      checkboxVal: ["归属", "批次", "应用名称", "应用包名", "应用图标", "是否允许滑动", "是否允许升级", "是否允许联网", "开机自启"],
      key: 1,
      colData: [], //动态控制table
      total: 0,
      searchTable: "",
      select: "3", //搜索条件
      labelTable: [],
      listQuery: { startSize: 1, pageSize: 10, userId: localStorage.getItem("ID"), app_name: undefined, app_package: undefined, batch: undefined, username: undefined, sort: '' },
      batchData: []
    }
  },
  created() {
    this.colData = objectable(this.checkboxVal, this.checkboxVal); //控制table
    this.getqueryAppControl()
    this.getBatch()
  },
  methods: {
    isSilde(id, batch_id, is_slide) {
      this.geteditAppControl(id, 1, batch_id, { 'is_slide': is_slide })
    },
    isUpguade(id, app_batch, is_upgrade) {
      this.geteditAppControl(id, 2, app_batch, { 'is_upgrade': is_upgrade })
    },
    isNetwork(id, app_batch, is_network) {
      this.geteditAppControl(id, 3, app_batch, { 'is_network': is_network })
    },
    isAuto(id, app_batch, is_auto) {
      this.geteditAppControl(id, 4, app_batch, { 'is_auto': is_auto })
    },
    //启用自启，网络，升级，滑动:1是否滑动,2是否升级,3是否网络,4是否自启
    geteditAppControl(id, type, app_batch, parameter) {
      let data = { userId: localStorage.getItem("ID"), last_ip: sessionStorage.getItem("Ip"), id: id, type: type, app_batch: app_batch, ...parameter }
      editAppControl(data).then(res => {
        this.$message.success(res.msg)
      })
    },
    getqueryAppControl() {
      queryAppControl(this.listQuery).then(res => {
        this.labelTable = res.data
        this.total = res.total
      }).catch(err => {
        this.labelTable = []
        this.total = 0
      })
    },
    //搜索,1：应用名称，2:应用包名
    idnameSearch() {
      if (!this.select) return this.$message.warning("请先选择查询条件");
      this.listQuery.startSize = 1
      this.listQuery.pageSize = 10
      switch (this.select) {
        case '1':
          this.listQuery.app_name = this.searchTable
          this.getqueryAppControl();
          break;
        case '2':
          this.listQuery.app_package = this.searchTable
          this.getqueryAppControl();
          break;
        case '3':
          //let search = this.batchData.filter(key => key.batch == this.searchTable).map(item => item.id)[0]
          this.listQuery.batch = this.searchTable
          this.getqueryAppControl();
          break;
        case '4':
          this.listQuery.username = this.searchTable
          this.getqueryAppControl();
          break;
      }
    },
    getBatch() {
      getBatchTwo({ userId: localStorage.getItem("ID") }).then(res => {
        this.batchData = res.data
      }).catch(err => {
        this.batchData = []
      })
    },
    handleSizeChange(val) {
      this.listQuery.pageSize = val
      this.getqueryAppControl();
    },
    handleCurrentChange(val) {
      this.listQuery.startSize = val
      this.getqueryAppControl();
    },
    Refresh() {
      this.listQuery = { startSize: 1, pageSize: 10, userId: localStorage.getItem("ID"), app_name: undefined, app_package: undefined, batch: undefined, username: undefined, sort: '' }
      this.getqueryAppControl()
    },
    //下拉动态table子组件
    alterCheckbok(key, conte) {
      this.key = key;
      this.colData.filter(i => {
        if (conte.indexOf(i.title) != -1) {
          i.istrue = false;
          this.$nextTick(() => {
            this.$refs.tableDataRef.doLayout();
          });
        } else {
          i.istrue = true;
          this.$nextTick(() => {
            this.$refs.tableDataRef.doLayout();
          });
        }
      });
    }
  }
}
</script>

<style scoped>
.txt{
  margin-left: 10px;
  font-weight: 500;
  color: red;
  font-size: 12px;
}
</style>

